#body {
  background-color: #f7f7f7;

  >div {
    width: 1000px;
    margin: 0 auto;

    >.list {
      >li {
        margin-bottom: 10px;
        display: flex;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.08);
        height: 150px;

        >img {
          height: 100%;
        }

        >div {
          display: flex;
          flex-direction: column;
          margin-left: 10px;
          justify-content: space-around;

          >b {
            color: red;
          }

          >span {
            color: gray;
          }
        }
      }
    }

    >.pager {
      display: flex;
      padding: 20px 0;

      >button {
        height: 30px;
        width: 70px;
        border-radius: 4px;
        border: 1px solid #777;

        // 伪类, 当按钮不可用时具有
        &:disabled {
          border-color: #aaa;
        }
      }

      >ul {
        display: flex;

        >li {
          line-height: 28px;
          text-align: center;
          width: 30px;
          border-radius: 4px;
          border: 1px solid #777;
          margin-left: 5px;
          cursor: pointer;

          &.active {
            background-color: orange;
            color: white;
            border-color: orange;
          }

          &:last-child {
            margin-right: 5px;
          }
        }
      }
    }

    >.sort {
      display: flex;
      margin-bottom: 10px;

      >li {
        margin-right: 10px;
        cursor: pointer;

        &.active {
          color: orange;
        }
      }
    }
  }
}